<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>学生列表</title>
  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <!-- Font Awesome 图标库 -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<style>
  body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa;
  }
  .container {
    display: flex;
    height: 100vh;
    padding: 20px;
    box-sizing: border-box;
  }
  .left {
    flex: 1;
    background-color: #2c3e50; /* 深蓝色背景 */
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-right: 20px;
    color: #ecf0f1; /* 浅色文字 */
  }
  .left h2 {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 20px;
    color: #ffffff;
    text-align: center;
  }
  .left ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .left ul li {
    margin-bottom: 10px;
  }
  .left ul li a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    color: #ecf0f1;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  .left ul li a:hover {
    background-color: #34495e; /* 悬停背景色 */
    color: #ffffff;
  }
  .left ul li a i {
    margin-right: 10px;
    font-size: 1.2rem;
  }
  .left ul li a.active {
    background-color: #1abc9c; /* 选中状态背景色 */
    color: #ffffff;
  }
  .right {
    flex: 4;
    background-color: #ffffff;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  .table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .table thead th {
    background-color: #34495e;
    color: #ffffff;
    padding: 12px;
    text-align: left;
  }
  .table tbody td {
    padding: 12px;
    border-bottom: 1px solid #e9ecef;
  }
  .table tbody tr:hover {
    background-color: #f1f1f1;
    transition: background-color 0.3s ease;
  }
  .table tbody tr:last-child td {
    border-bottom: none;
  }

</style>
<body>
<div class="container">
  <div class="left">
    <h2>教师管理系统</h2>
    <div th:include="left.html"></div>
  </div>
  <div class="right">
    <h2 style="text-align: center;font-weight:700">添加教师</h2>
    <form action="/Teacher/add" class="was-validated" method="post">
      <div class="form-group">
        <label for="name">教师姓名:</label>
        <input type="text" class="form-control" id="name" placeholder="Enter username" name="name"  required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入教师姓名！</div>
      </div>
      <div class="form-group">
        <label for="pwd">密码:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="password" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入密码！</div>
      </div>
      <div class="form-group">
        <label for="sex">性别:</label>
        <select class="form-control" id="sex" name="sex" required>
          <option value="" disabled selected>请选择性别</option>
          <option value="1">男</option>
          <option value="0">女</option>
        </select>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请选择性别！</div>
      </div>
      <div class="form-group">
        <label for="birthday">生日:</label>
        <input type="date" class="form-control" id="birthday" name="birthday" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请选择生日！</div>
      </div>
      <div class="form-group">
        <label for="courseId">主授课程:</label>
        <select class="btn btn-outline-primary dropdown-toggle" id="courseId" name="course_id">
          <option th:each="course:${courses}" th:value="${course.id}" th:text="${course.name}">
          </option>
        </select>
      </div>
      <div class="form-group">
        <label for="professional">专业:</label>
        <input type="text" class="form-control" id="professional" placeholder="输入专业" name="professional" required>
        <div class="valid-feedback">验证成功！</div>
        <div class="invalid-feedback">请输入专业！</div>
      </div>
      <div class="form-group form-check">
        <label class="form-check-label">
          <input class="form-check-input" type="checkbox" name="remember" required> 同意协议
          <div class="valid-feedback">验证成功！</div>
          <div class="invalid-feedback">同意协议才能提交。</div>
        </label>
      </div>
      <button type="submit" class="btn btn-primary">新增教师</button>
    </form>
  </div>
</div>
<script src="/bootstrap/js/jquery.min.js" crossorigin="anonymous"></script>
<script src="/bootstrap/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>

</body>
</html>